<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩查询</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
    <style>
        .score-container {
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 0;
        }
        .class-header {
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
            font-size: 18px;
            font-weight: 600;
        }
        .table thead th {
            background-color: #3498db;
            color: white;
            font-weight: 500;
            border-bottom: 2px solid #2980b9;
        }
        .pagination > .active > a {
            background-color: #3498db;
            border-color: #3498db;
        }
        .pagination > li > a {
            color: #3498db;
        }
        .score-info {
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .score-value {
            font-weight: 600;
            color: #3498db;
        }
        .empty-data {
            text-align: center;
            padding: 30px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        /* 修复底部空白 */
        body {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        .container-fluid {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }
        .row {
            margin-bottom: 0 !important;
        }
    </style>
</head>
<body>
<div th:replace="include/TeacherNav :: TeacherNav"></div>

<div class="container-fluid" style="padding-bottom: 0; margin-bottom: 0;">
    <div class="row" style="margin-bottom: 0;">
        <div class="col-md-10 col-md-offset-2" style="padding-bottom: 0;">
            <div class="score-container">
                <div class="class-header">
                    <i class="glyphicon glyphicon-education"></i> 班级：<span th:text="${cs != null ? cs.classname : '未选择班级'}"></span>
                </div>
                
                <!-- 成绩表格 -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>试卷名称</th>
                                <th>试卷总分</th>
                                <th>个人成绩</th>
                                <th>考试时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${score.content.isEmpty()}">
                                <td colspan="6" class="text-center">暂无成绩数据</td>
                            </tr>
                            <tr th:each="scoreItem: ${score.content}">
                                <td th:text="${scoreItem.users.username}"></td>
                                <td th:text="${scoreItem.users.truename}"></td>
                                <td th:text="${scoreItem.pname}"></td>
                                <td th:text="${scoreItem.zscore}"></td>
                                <td>
                                    <span th:text="${scoreItem.score}" 
                                          th:class="${scoreItem.score >= scoreItem.zscore * 0.6 ? 'text-success' : 'text-danger'}"
                                          style="font-weight: bold;"></span>
                                </td>
                                <td th:text="${#dates.format(scoreItem.tjtime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页信息 -->
                <div class="row" style="margin-bottom: 0;">
                    <div class="col-md-6 score-info">
                        当前第 <span class="score-value" th:text="${score.number + 1}"></span> 页，
                        共 <span class="score-value" th:text="${score.totalPages}"></span> 页，
                        共 <span class="score-value" th:text="${score.totalElements}"></span> 条记录
                    </div>
                    <div class="col-md-6">
                        <nav aria-label="Page navigation">
                            <ul class="pagination pagination-sm pull-right">
                                <li th:class="${score.first ? 'disabled' : ''}">
                                    <a th:href="@{/findAllScore}" aria-label="首页">
                                        <span aria-hidden="true">首页</span>
                                    </a>
                                </li>
                                <li th:class="${score.hasPrevious() ? '' : 'disabled'}">
                                    <a th:href="@{/findAllScore(pageNum = ${score.number})}" aria-label="上一页">
                                        <span aria-hidden="true">上一页</span>
                                    </a>
                                </li>
                                <li th:class="${score.hasNext() ? '' : 'disabled'}">
                                    <a th:href="@{/findAllScore(pageNum = ${score.number + 2})}" aria-label="下一页">
                                        <span aria-hidden="true">下一页</span>
                                    </a>
                                </li>
                                <li th:class="${score.last ? 'disabled' : ''}">
                                    <a th:href="@{/findAllScore(pageNum = ${score.totalPages})}" aria-label="末页">
                                        <span aria-hidden="true">末页</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>